<!DOCTYPE html>
<html>
	<head> 
		<title>Jump for Joy</title> 
		<link href="styles/my_style.css" rel="stylesheet">
	</head> 
	<body> 
		<div id="header">
			<h2>Jump for Joy Sale</h2>
		</div>
		<div id="main">
			<div class="guess_box"><img src="images/jump1.jpg"/></div>
			<div class="guess_box"><img src="images/jump2.jpg"/></div>
			<div class="guess_box"><img src="images/jump3.jpg"/></div>
			<div class="guess_box"><img src="images/jump4.jpg"/></div>
		</div>
		<script src="scripts/jquery-1.6.2.min.js"></script>
		<script>
            	    

		    $(document).ready(function () {
		        $(".guess_box").click(function () {
		            $(".guess_box p").remove();
		            $(".guess_box span.span1").remove();
		            var discount = Math.floor((Math.random() * 5) + 5);
		            var discount_msg = "<p>Your Discount is " + discount + "%</p>";
		            var discount_msg1 = "<span class='span1'>span tag</span>";
		            //alert(discount_msg);
		            $(this).append(discount_msg);
		            $(this).append(discount_msg1);
		            //$(this).append(discount_msg);
		        });
		    });

		</script>
	</body>
</html>